<script  src="${gatewayPath}/framework/js/add-bi-app-relation.js?v=2023-04-24T10:54:57Z"></script>
<div class="tempo-add-bi-relation-dialog">

    <style>
        .tempo-add-bi-relation-dialog{
            background: #EAEDF1 !important;
        }
        .tempo-add-bi-relation-dialog .container-layout{
            width: 100%;
            height: 100%;
        }
        .tempo-add-bi-relation-dialog .left-container{
            height: 100%;
            width: calc(100% - 20px);
        }
        .tempo-add-bi-relation-dialog .right-container{
            width: 100%;
            height: 100%;
            background: white;
        }
        .tempo-add-bi-relation-dialog .title{
            text-align: center;
            height: 20px;
            line-height: 20px;
            color: #666;
        }
        .tempo-add-bi-relation-dialog .search-bar{
            margin: 5px 0px;
        }
        .tempo-add-bi-relation-dialog .content-exhibition{
            height: calc(100% - 80px);
            overflow: auto;
        }
        .tempo-add-bi-relation-dialog .wk-list{
            margin: 0;
            padding: 0;
        }
        .tempo-add-bi-relation-dialog .wk-list li{
            list-style: none;
            display: block;
            height: 26px;
            line-height: 26px;
            padding: 0 0 0 4px;
            cursor: pointer;
        }
        .tempo-add-bi-relation-dialog .wk-list li:hover{
            background: #d7ecf8;
        }
        .tempo-add-bi-relation-dialog .wk-list .selected{
            background: #b8c8e4;
        }
        .tempo-add-bi-relation-dialog .wk-list .icon{
            margin-right: 8px;
            margin-bottom: 5px;
        }
        .tempo-add-bi-relation-dialog .wk-list .label{
            display: inline-block;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .tempo-add-bi-relation-dialog .app-tree{
            width: calc(100% - 20px);
        }
        .tempo-add-bi-relation-dialog .footer{
            height: 24px;
            line-height: 24px;
            background: #EAEDF1;
            color: #999;
        }
        .tempo-add-bi-relation-dialog .footer span{
            color: #333;
        }
        .tempo-add-bi-relation-dialog .wk-list .more{
            padding: 0;
        }
        .tempo-add-bi-relation-dialog .wk-list .more:hover{
            background: none;
        }
        .tempo-add-bi-relation-dialog .wk-list .line{
            width: 100%;
            display: block;
            height: 1px;
            background: #dcdcdc;
            position: relative;
            top: 13px;
        }
        .tempo-add-bi-relation-dialog .wk-list .line-label{
            display: block;
            text-align: center;
            z-index: 100;
            position: relative;
            color: #999;
        }
        /**
        展开的文件夹
         */
        .tempo-add-bi-relation-dialog .tempo-bi-folder-open-icon {
            background-color: red;
            height: 16px;
            width: 16px;
        }
        /**
        关闭的文件夹
         */
        .tempo-add-bi-relation-dialog .tempo-bi-folder-close-icon {
            background-color: blue;
            height: 16px;
            width: 16px;
        }
    </style>
    <div class="container-layout">
        <div class="tempo-ai-bi-relation-ai-info" aiWorkspaceId="${aiWorkspaceId}" aiAppId="${aiAppId}" aiFlowId="${aiFlowId}" style="display: none"></div>
        <div class="ui-layout-west">
            <div class="left-container">
                <div class="title"><@spring.message "bidesign.app_wk_list"/></div>
                <div class="search-bar"></div>
                <div class="content-exhibition">
                    <ul class="wk-list">
                    </ul>
                </div>
                <div class="footer"></div>
            </div>
        </div>
        <div class="ui-layout-center">
            <div class="right-container">
                <div class="title">选择应用</div>
                <div class="search-bar"></div>
                <div class="content-exhibition">
                    <div class="app-tree"></div>
                </div>
                <div class="footer"></div>
            </div>
        </div>
    </div>

    <div id="tempo-app-index-i18n" style="display: none;"
         _app_add_url="<@spring.message 'bidesign.app_add_url'/>"
         _app_add_achievement="添加应用"
         _app_more_wk_please_search="<@spring.message 'bidesign.app_more_wk_please_search'/>"
         _app_please_select_achievement="至少选择一个应用",
         _please_input_name="<@spring.message 'bidesign.please_input_name'/>"
         _app_wk_total_num="共@@个空间"
         _app_selected_achievemet_num="已选中@@个应用"
    ></div>
</div>
